<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>首页</title>
		<link href="../bootstrap/css/bootstrap.css" rel="stylesheet">
		<link href="../css/index.css" rel="stylesheet">
		<link href="../css/animation.css" rel="stylesheet">

		<script src="../js/jquery-1.11.3.js"></script>
		<script src="../bootstrap/js/bootstrap.min.js"></script>
		<script src="../js/index.js"></script>
	</head>

	<body>
		<!--导航栏部分-->
		<nav class="navbar navbar-default navbar-inverse">
			<div class="container-fluid">

				<div class="navbar-header">

					<a class="navbar-brand " href="#">首页</a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">
						<li >
							<a href="page.html" >博客经验</a>
						</li>
						<li >
							<a href="#" >资源分享</a>
						</li>
						<li>
							<a href="#" >时间轴</a>
						</li>
						<li>
							<a href="#" >关于我</a>
						</li>
						<li>
							<a href="#" >给我留言</a>
						</li>
					</ul>
				</div>
			</div>
		</nav>

		<!--主体部分-->
		<!--第一部分-->

		<div id="mainbody">
			<div class="info">
				<figure>

					<div id="imgs" data-interval="2000" data-ride="carousel" class="carousel slide">

						<div class="carousel-inner">

							<div class="item active">

								<img src="../img/index12.jpg">

							</div>

							<div class="item">

								<img src="../img/index1.jpg">

							</div>

							<div class="item">

								<img src="../img/index14.jpg">

							</div>

							<div class="item">

								<img src="../img/index13.jpg">

							</div>

							<ul class="carousel-indicators">

								<li data-target="#imgs" data-slide-to="0" class="active"></li>

								<li data-target="#imgs" data-slide-to="1"></li>

								<li data-target="#imgs" data-slide-to="2"></li>

								<li data-target="#imgs" data-slide-to="3"></li>

							</ul>

						</div>

						<a href="#imgs" data-slide="prev" class="carousel-control left" style="margin-top:100px;"></a>

						<a href="#imgs" data-slide="next" class="carousel-control right" style="margin-top:100px;"></a>

					</div>

				</figure>
				<div class="card">
					<h1>我的名片</h1>
					<p>网名：Strobborn</p>
					<p>职业：前端工程师</p>
					<p>邮箱：1821060237@qq.com</p>
					<p>QQ联系方式：1821060237</p>

				</div>
			</div>
			<div class="blank"></div>
			<!--第二部分-->
			<div class="blogs">
				<ul class="bloglist">
					<li>
						<div class="arrow_box">
							<div class="ti"></div>

							<div class="ci"></div>

							<h2 class="title"><a href="page.html" target="_blank">前端入门</a></h2>
							<ul class="textinfo">
								<a href="/"><img src="../img/index4.jpg"></a>
								<p>HTML,CSS,javascript相关资料书，我们还要知道它的一些基本协议 在整个学习过程中HTML CSS
								  JavaScript会有很多地方需要互相结合，实际工作中也是这样，一个简单的功能模块都需要三者结合才能实现。
								     动手是学习的重要组成部分，书籍重点讲解知识点，例子可能不是很充足，这就需要利用搜索引擎寻找一些简单教程，照着教程实现功能。
								</p>
							</ul>
							<ul class="details">
								<li class="likes">
									<a href="#">10</a>
								</li>
								<li class="comments">
									<a href="#">34</a>
								</li>
								<li class="icon-time">
									<a href="#">2019-11-17</a>
								</li>
							</ul>
						</div>

					</li>
					<li>
						<div class="arrow_box">
							<div class="ti"></div>

							<div class="ci"></div>

							<h2 class="title"><a href="https://www.baidu.com/s?ie=UTF-8&wd=css%E6%89%8B%E5%86%8C" target="_blank">css手册</a></h2>
							<ul class="textinfo">
								<a href="/"><img src="../img/index3.jpg"></a>
								<p> 层叠样式表是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
								</p>
							</ul>
							<ul class="details">
								<li class="likes">
									<a href="#">102</a>
								</li>
								<li class="comments">
									<a href="#">58</a>
								</li>
								<li class="icon-time">
									<a href="#">2019-12-7</a>
								</li>
							</ul>
						</div>

					</li>
					<li>
						<div class="arrow_box">
							<div class="ti"></div>

							<div class="ci"></div>

							<h2 class="title"><a href="https://www.w3school.com.cn/jsref/index.asp" target="_blank">js手册</a></h2>
							<ul class="textinfo">
								<a href="/"><img src="../img/index2.jpg"></a>
								<p> JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中 ，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。</p>
							</ul>
							<ul class="details">
								<li class="likes">
									<a href="#">15</a>
								</li>
								<li class="comments">
									<a href="#">2</a>
								</li>
								<li class="icon-time">
									<a href="#">2019-2-7</a>
								</li>
							</ul>
						</div>

					</li>
					<li>
						<div class="arrow_box">
							<div class="ti"></div>

							<div class="ci"></div>

							<h2 class="title"><a href="https://v3.bootcss.com/components/" target="_blank">bootstreap框架</a></h2>
							<ul class="textinfo">
								<a href="/"><img src="../img/index9.jpg"></a>
								<p> Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目。 </p>
							</ul>
							<ul class="details">
								<li class="likes">
									<a href="#">102</a>
								</li>
								<li class="comments">
									<a href="#">58</a>
								</li>
								<li class="icon-time">
									<a href="#">2013-8-7</a>
								</li>
							</ul>
						</div>

					</li>
					<li>
						<div class="arrow_box">
							<div class="ti"></div>

							<div class="ci"></div>

							<h2 class="title"><a href="https://www.baidu.com/s?ie=UTF-8&wd=vue" target="_blank">vue框架</a></h2>
							<ul class="textinfo">
								<a href="/"><img src="../img/index8.jpg"></a>
								<p> Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。 Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue 学习起来非常简单</p>
							</ul>
							<ul class="details">
								<li class="likes">
									<a href="#">15</a>
								</li>
								<li class="comments">
									<a href="#">2</a>
								</li>
								<li class="icon-time">
									<a href="#">2013-8-7</a>
								</li>
							</ul>
						</div>

					</li>
				</ul>

				<aside>
					<div class="tuijian">
						<h2>推荐的网站</h2>
						<ol>
							<li><span><strong>1</strong></span>
								<a href="http://www.qianduandaxue.com/">前端网</a>
							</li>
							
							<li><span><strong>2</strong></span>
								<a href="https://daneden.github.io/animate.css/">css动画</a>
							</li>
							<li><span><strong>3</strong></span>
								<a href="https://www.shiyanlou.com/">学习网站</a>
							</li>
							<li><span><strong>4</strong></span>
								<a href="https://www.w3school.com.cn/js/js_intro.asp">学习js的网站</a>
							</li>
							<li><span><strong>5</strong></span>
								<a href="https://code.ziqiangxuetang.com/">自强学堂</a>
							</li>
							<li><span><strong>6</strong></span>
								<a href="https://www.pexels.com/">高质量的图片</a>
							</li>
							
							<li><span><strong>7</strong></span>
								<a href="http://baijiahao.baidu.com/s?id=1587722571899603255&wfr=spider&for=pc">必备的动画插件</a>
							</li>
							<li><span><strong>8</strong></span>
								<a href="https://www.liaoxuefeng.com/">廖雪峰老师网站</a>
							</li>
							<li><span><strong>9</strong></span>
								<a href="https://developer.mozilla.org/zh-CN/">MDN web 文档</a>
							</li>
							
						</ol>
					</div>
					<div class="toppic">
						<h2>推荐的博客</h2>
						<ul>
							<li>
								<a href="www.36kr.com"><img src="../img/index7.jpg">36氪博客

								</a>
							</li>
							<li>
								<a href="www.alibuybuy.com"><img src="../img/index6.jpg">互联网那点事

								</a>
							</li>
							<li>
								<a href="www.showeb20.com"><img src="../img/index5.jpg">分享网络2.0

								</a>
							</li>
						</ul>
					</div>
					<div class="clicks">
						<h2>互联网热门点击</h2>
						<ol>
							<li>
								<span>
									<a href="https://news.qudong.com/article/444975.shtml">短视频应用人气飙升
									</a>
								</span>

								<li><span><a href="https://www.sohu.com/a/256634049_99976729">AI（人工智能）</a></span>

								</li>
								<li><span><a href="https://blog.csdn.net/FL63Zv9Zou86950w/article/details/95414499">5G承载</a></span>

								</li>
								<li><span><a href="http://tech.163.com/special/S1522052179358/">上市潮</a></span>

								</li>
								<li><span><a href="http://www.cww.net.cn/article?id=413519">共享单车命运多舛</a></span>

								</li>
								<li><span><a href="https://tech.sina.com.cn/roll/2019-12-18/doc-iihnzhfz6805996.shtml">比特币大跌</a></span>

								</li>
								<li><span><a href="https://baijiahao.baidu.com/s?id=1610920322626305003&wfr=spider&for=pc">生物识别技术</a></span>

								</li>
								<li><span><a href="https://baike.baidu.com/item/%E8%B0%B7%E6%AD%8C%E6%97%A0%E4%BA%BA%E9%A9%BE%E9%A9%B6%E6%B1%BD%E8%BD%A6/8435223?fr=aladdin">无人汽车</a></span>

								</li>
						</ol>
					</div>
					<div class="search">
						<form class="searchform" method="get" action="#">
							<input type="text" name="s" value="Search" onfocus="this.value=''" onblur="this.value='Search'">
						</form>
					</div>
					<div class="viny">
						<dl>
							<dt class="art"><img src="../img/index11.jpg" alt="陈奕迅"></dt>
							<dd class="icon-song"><span></span>歌曲：可以了</dd>
							<dd class="icon-artist"><span></span>歌手：陈奕迅</dd>
							<dd class="icon-album"><span></span>专辑：rice＆shine</dd>
							<dd class="icon-like"><span></span>
								<a href="/">farvorite</a>
							</dd>
							<dd class="music">
								<audio src="../img/youcan.mp3" controls autoplay loop="true"></audio>

							</dd>

						</dl>
					</div>
					<div class="yunxing">
						<p id="runtime">本站运行时间: 0天 0小时 00分00秒</p>
					</div>
				</aside>
			</div>
		</div>
		<!--最后面一部分-->
		<footer>
			<div class="footer-mid">
				<div class="links">
					<h2>友情链接</h2>
					<ul>
						<li>
							<a href="https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=%E8%8F%9C%E9%B8%9F&oq=%25E7%2599%25BE%25E5%25BA%25A6&rsv_pq=857610d100074ef1&rsv_t=1e3fuZBq3EgM80agv0uNDFG3FapV2cGg9XDBUxsje8wgs%2BhIphPAf8Ypy2w&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=8&rsv_sug1=8&rsv_sug7=100&rsv_sug2=0&inputT=2205&rsv_sug4=2205">菜鸟教程</a>
						</li>
						<li>
							<a href="http://www.baidu.com">百度</a>
						</li>
					</ul>
				</div>
				<div class="visitors">
					<h2>个人分享</h2>
					<dl>
						<dt><img src="../img/01.jpg">
        <dt>
        <dd>傅六夏
         
        </dd>
        <dd> <a href="http://www.yangqq.com/jstt/bj/2013-07-28/530.html" class="title">如果要学习web前端开发，需要学习什么？ </a></dd>
  
      </dl>
      <dl>
        <dt><img src="../img/02.jpg">
        <dt>
        <dd>白乐
        
        </dd>
        <dd> <a href="https://www.baidu.com/s?ie=UTF-8&wd=%E7%9F%A5%E4%B9%8E" class="title">知乎大神</a></dd>
       
      </dl>
      <dl>
        <dt><img src="../img/03.jpg">
        <dt>
        <dd>stionngb
         
        </dd>
        <dd> <a href="https://www.nowcoder.com/" class="title">牛客网，一个可以学习的网站 </a></dd>
        <dd></dd>
      </dl>
    </div>
    <section class="flickr">
      <h2>摄影作品</h2>
      <ul>
        <li><a href="/"><img src="../img/1.jpg"></a></li>
        <li><a href="/"><img src="../img/2.jpg"></a></li>
        <li><a href="/"><img src="../img/3.jpg"></a></li>
        <li><a href="/"><img src="../img/4.jpg"></a></li>
        <li><a href="/"><img src="../img/4.jpg"></a></li>
        <li><a href="/"><img src="../img/6.jpg"></a></li>
        <li><a href="/"><img src="../img/7.jpg"></a></li>
        <li><a href="/"><img src="../img/8.jpg"></a></li>
        <li><a href="/"><img src="../img/9.jpg"></a></li>
      </ul>
    </section>
  </div>
 </footer>

<div id="tbox"> <a id="togbook" href="/e/tool/gbook/?bid=1"></a> <a id="gotop" href="javascript:void(0)"></a> </div>

<script>
	window.onload = function(){
    // 开始时间
    var start = new Date("2019/12/25 12:00:00").getTime();
    setInterval(function(){
        // 现在
        var now = new Date().getTime();
        // 运行总时间
        var run = now -  start;
        // 总秒
        var sumSeconds = parseInt(run / 1000);
        // 天数
        var d = parseInt(sumSeconds / 86400);
        // 小时
        var h = parseInt(sumSeconds % 86400 / 3600);
        // 分钟
        var min = size(parseInt(sumSeconds / 60 % 60));
        // 秒
        var m = size(parseInt(sumSeconds % 60));
        // 插入
        document.querySelector('#runtime').innerHTML = "本站运行时间: " + d + "天 " + h + "小时 " + min + "分" + m + "秒";
    }, 1000)
    // 小于10的数，前边增加一个0
    function size(d){
        return d < 10 ? '0' + d : d;
    }
}
</script>
	

	</body>

</html>